<template>
	<div class="search">
		<p class="coupon-num">
			共有 <span class="num-block" v-for="(item, index) in couponTotal" :key="index">{{ item }}</span> 张天猫/淘宝隐藏券
		</p>

		<!-- <div class="coupon" @click="$router.push({ path: '/goods-search' })">
			<i class="iconfont icon-sousuo"></i>
			<div class="swiper">
				<van-swipe :autoplay="3000" indicator-color="white" :show-indicators="false" :vertical="true" :touchable="false">
					<template v-if="shareTemplate.length > 0">
						<van-swipe-item v-for="(item, index) in shareTemplate" :key="index">{{ item }}</van-swipe-item>
					</template>
					<van-swipe-item v-else>复制淘宝天猫商品，领券下单拿补贴~</van-swipe-item>
				</van-swipe>
			</div>
			<a>搜券</a>
		</div> -->
		<div class="to-search" @click="$router.push({ path: '/goods-search' })">
			<span>复制淘宝商品链接 领优惠券再拿补贴</span>
			<span class="span">搜券</span>
		</div>

		<!--省钱教程-->
		<div class="course-top">
			三步省钱
			<div class="course-btn" @click="$router.push({ path: '/special-course' })">
				教程
				<van-icon name="arrow" />
			</div>
		</div>
		<div class="course">
			<p class="left">
				<span class="num">1</span><span class="text">复制淘宝商品标题/链接</span><span class="num">2</span><span class="text">搜索优惠劵</span
				><span class="num">3</span><span class="">领现金补贴</span>
			</p>
			<!-- <div class="course-btn" @click="$router.push({ path: '/special-course' })">
				<p>教程</p>
				<van-icon name="arrow" />
			</div> -->
		</div>
	</div>
</template>

<script>
export default {
	name: 'Search',
	components: {},
	props: {
		shareTemplate: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			couponTotal: 0
		};
	},
	activated() {
		this.farchData();
	},
	methods: {
		farchData() {
			this.$service.shopping.goods.couponCount().then(res => {
				this.numberGrowth(res.totle);
			});
		},
		// 数字增长
		numberGrowth(value) {
			// 将数据除以12，计算步长
			let step = Math.round(parseInt(value) / 22);
			let current = 0;
			let start = 0;
			let t = setInterval(() => {
				start += parseInt(step);
				if (start > value) {
					clearInterval(t);
					start = value;
					t = null;
				}
				if (current === start) {
					return false;
				}
				current = parseInt(start);
				this.couponTotal = String(current);
			}, 50);
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	// padding: 20px 0;
	text-align: center;
	// min-height: 335px;
	height: 475px;
	background: url('../../../assets/images/index/search/background.png') no-repeat center center;
	background-size: 100% 100%;
	.coupon-num {
		padding-top: 170px;
		color: $color-white;
		font-size: 22px;
		font-weight: 400;
		.num-block {
			font-size: 24px;
			width: 22px;
			height: 28px;
			line-height: 28px;
			background: rgba(221, 0, 13, 1);
			border-radius: 4px;
			margin: 0 3px;
			display: inline-block;
		}
	}
	.to-search {
		width: 730px;
		height: 120px;
		line-height: 110px;
		margin: 0 auto;
		font-size: 26px;
		color: #8b8b8b;
		background: url('../../../assets/images/index/search/searchbg.png') no-repeat center center;
		background-size: 100% 100%;
		padding-left: 85px;
		margin-top: 30px;
		.span {
			font-size: 28px;
			color: #b96f25;
			margin-left: 60px;
		}
	}
	.coupon {
		width: 658px;
		height: 100px;
		background: $color-white;
		border-radius: 50px;
		margin-top: 40px;
		padding: 12px;
		margin-bottom: 20px;
		@include flexBox(space-between, center);
		i {
			color: $main-color;
			font-size: 50px;
		}
		p {
			color: #8b8b8b;
			font-size: 25px;
		}
		a {
			background: $main-color;
			color: $color-white;
			font-size: 28px;
			padding: 16px 36px;
			border-radius: 50px;
		}
		.swiper {
			width: 434px;
			.van-swipe {
				height: 80px;
				overflow: hidden;
				.van-swipe-item {
					color: #8b8b8b;
					font-size: 24px;
					width: 100%;
					line-height: 80px;
					text-align: left;
					background: none;
					@include ellipsis(1);
				}
			}
		}
	}
	.course-top {
		width: 720px;
		@include flexBox(space-between, center);
		font-size: 28px;
		padding-left: 30px;
		font-weight: 400;
		line-height: 40px;
		color: rgba(255, 255, 255, 1);
		margin-bottom: 22px;
		.course-btn {
			width: 126px;
			height: 40px;
			line-height: 40px;
			background: rgba(253, 98, 116, 1);
			border: 2px solid rgba(255, 165, 165, 1);
			font-size: 24px;
			border-radius: 20px;
			@include flexBox(center, center);
			&:hover {
				color: #e83f28;
				background: rgba(253, 98, 116, 1);
			}
		}
	}
	.course {
		width: 726px;
		@include flexBox(space-between, center);
		// margin-top: -50px;
		.left {
			padding: 0 0px 0 30px;
			// background: #ef4f26;
			border-radius: 50px;
			font-size: 24px;
			color: $color-white;
			@include flexBox(null, center);
			.num {
				font-size: 20px;
				margin-right: 6px;
				font-weight: 400;
				width: 26px;
				height: 26px;
				line-height: 26px;
				background: rgba(255, 255, 255, 1);
				border-radius: 14px;
				color: #fe6a6b;
				text-align: center;
			}
			.text {
				margin-right: 48px;
				line-height: 26px;
			}
		}
	}
}
/deep/.van-swipe {
	.van-swipe__track {
		display: flex;
		flex-direction: column;
	}
}
</style>
